<template>
  <div class="home">
    <div class="content">
      <div class="left">
        用户名： <input type="text" class="username" v-model="username" v-if="isLogin"><em v-else>{{username}}</em>
        <span v-show="show">用户名必须是6-18位的数组、字母、下划线。</span>
        <br>
        <button @click="login">登录</button>
      </div>
      <div class="right">
        <div class="mask" @click.stop v-show="isLogin"></div>
        <div v-if="count < 5">
          <div>
            <h3>{{querstion.title}}</h3>
            <div class="questions">
              <p v-for="(item, i) in querstion.options" :key="item"><input ref="radio" type="radio" @click="chose(i)" name="single">{{item}}</p>
            </div>
            <button @click="subAnswer">{{text}}</button>
            <span>{{warn}}</span>
          </div>
          <div class="status">
            <span>共有{{count}}/{{arr.length}}道题</span>
            <span>答对：{{right}}</span>
            <span>答错：{{wrong}}</span>
          </div>
        </div>
        <div v-else>没有了。<button @click="argin">再做一遍</button></div>
      </div>
    </div>
  </div>
</template>

<script>
var timer
import jsonData from '../../public/data.json'
export default {
  name: 'Home',
  data() {
    return {
      username: '',
      show: false,
      isLogin: true,
      arr: jsonData.data,
      querstion: {},
      text: '提交答案',
      warn: '',
      ind: null,
      right: 0,
      wrong: 0,
      count: 1
    }
  },
  created() {
    this.querstion = this.arr[0]
  },
  methods: {
    login() {
      let reg = /^\w{6,18}$/
      if(reg.test(this.username)) {
        this.show = false
        this.isLogin = false
      } else {
        this.show = true
        this.isLogin = true
      }
    },
    // 提交答案
    subAnswer() {
      let time = 3
      this.warn = time + '秒后进入下一题'
      if(this.ind == this.querstion.right) {
        this.text = "回答正确"
        this.right++
      } else {
        this.text = "回答错误"
        this.wrong++
      }

      timer = setInterval(() => {
        if(time > 0) {
          time--
          this.warn = time + '秒后进入下一题'
        } else {
          clearInterval(timer)
          this.text = "提交答案"
          this.warn = ''
          this.count++
          this.querstion = this.arr[this.count - 1]
          this.$refs.radio.forEach(item => {
            item.checked = false
          })
        }
      }, 1000)
    },
    chose(i) {
      this.ind = i
    },

    argin() {
      this.querstion = this.arr[0]
      this.count = 1
    }
  }
}
</script>
<style lang="scss" scoped>
em {
  font-style: normal;
}
  .content {
    border: 1px solid #ccc;
    display: flex;
    margin-top: 50px;
  }
  .left {
    flex-basis: 40%;
    height: 400px;
    border-right: 1px solid #ccc;
    padding: 10px 5px;
    span{
      color: red;
    }
    button {
      margin-top: 50px;
      background-color: #ccc;
      outline: none;
      border: none;
      padding: 4px 10px;
      border-radius: 4px;
    }
    .username {
      width: 200px;
      height: 30px;
      outline: none;
      border: 2px solid #ccc;
      border-radius: 6px;
      background-color: #999;
      &:focus {
        border: 2px solid green;
      }

     
    }
  }

  .right {
    flex-basis: 60%;
    height: 400px;
    padding: 10px 10px;
    position: relative;
    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba($color: #000000, $alpha: 0.7);
    }
    .status {
      margin-top: 50px;
    }
    .questions {
      padding-left: 50px;
      font-weight: 500;
      input[type="radio"] {
        width: 20px;
        height: 20px;
      }
      p {
        display: flex;
        align-items: center;
      }
    }
  }
  
</style>
